<template>
  <div class="app-container">
    <el-button v-permission="['freight:add']" class="filter-item margin-bottom-10" type="primary" @click="toAdd">添加运费模板</el-button>

    <template v-for="template in list">
      <div :key="template.id" class="list">
        <el-card class="box-card margin-bottom-10" shadow="never">
          <div slot="header" style="padding-left:10px;padding-right:10px;">
            <span>
              {{ template.name }}
              <b v-if="template.freeShipping" class="red">(全国包邮)</b>
              <b v-if="template.freeConditions" class="red">(已指定条件包邮)</b>
            </span>
            <el-link v-permission="['freight:delete']" :underline="false" type="primary" class="fr margin-left-10" @click="remove(template.id)">删除</el-link>
            <el-link v-permission="['freight:detail']" :underline="false" type="primary" class="fr margin-left-10" @click="toEdit(template.id)">修改</el-link>
            <div class="fr" style="color:#bec1c7">最后编辑时间:{{ template.createDate }}</div>
          </div>
          <el-table :data="template.pricings" style="width: 100%;margin-bottom:10px" border>
            <el-table-column prop="shippingMethodName" label="运送方式" width="100" align="center"/>
            <el-table-column prop="cityNames" label="运送到">
              <template slot-scope="scope">
                {{ scope.row.cityNames }}
                <span v-if="scope.row.defaults">全国(默认)</span>
              </template>
            </el-table-column>
            <el-table-column :label="'首件('+template.unit+')'" prop="firstNum" width="80" align="center"/>
            <el-table-column prop="firstPrice" label="首费" width="80" align="center"/>
            <el-table-column :label="'续件('+template.unit+')'" prop="nextNum" width="80" align="center"/>
            <el-table-column prop="nextPrice" label="续费" width="80" align="center"/>
          </el-table>
          <el-table v-if="template.freeConditions" :data="template.conditions" style="width: 100%;margin-bottom:10px" border>
            <el-table-column prop="shippingMethodName" label="运送方式" width="100" align="center"/>
            <el-table-column prop="cityNames" label="包邮运送到">
              <template slot-scope="scope">
                {{ scope.row.cityNames }}
              </template>
            </el-table-column>
            <el-table-column :label="'包邮条件'" width="300" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.pricingMethod===conditionType.PIECE.id">
                  件数满{{ scope.row.pieces }} {{ scope.row.unit }} 包邮
                </span>
                <span v-else-if="scope.row.pricingMethod===conditionType.MONEY.id">
                  金额满{{ scope.row.prices }} {{ scope.row.unit }} 包邮
                </span>
                <span v-else-if="scope.row.pricingMethod===conditionType.ALL.id">
                  件数满{{ scope.row.pieces }} {{ scope.row.unit }} 或 金额满{{ scope.row.prices }} 元 包邮
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </template>
    <pagination v-permission="['freight:list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initList"/>
  </div>
</template>
<style>
  .list.el-card{border:0;}
  .list .el-card__header{padding:0;color: #ffffff;background-color: #484d56 !important;font-weight: bold;font-size: 14px;height:40px;line-height:40px;}
  .el-card__body{padding:0px;}
</style>
<script>
import { FreightTemplateService } from '@/api/ProductService'
import Pagination from '@/components/Pagination'
import { Notify } from '@/utils/notify'
export default {
  name: 'Freight',
  components: { Pagination },
  data() {
    return {
      list: [], total: 0, listQuery: { pageNo: 1, pageSize: 20 },
      conditionType: { PIECE: { id: 1, name: '件数' }, MONEY: { id: 2, name: '金额' }, ALL: { id: 5, name: '件数+金额' }}
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      this.listLoading = true
      FreightTemplateService.listFreight(this.listQuery).then(response => {
        const array = response.data
        this.total = response.totalCount
        if (array) {
          array.forEach(item => {
            if (item.freeShipping) {
              item.pricings = [{ shippingMethodName: '快递', cityNames: '全国', unit: '件', firstNum: 1, nextNum: 1, firstPrice: 0, nextPrice: 0 }]
            }
          })
        }
        this.list = array
      })
    },
    remove(templateId) {
      this.$confirm('您确认要删除该运费模板吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        FreightTemplateService.deleteFreight(templateId).then(() => {
          Notify.success(this, '删除成功!')
          this.initList()
        })
      }).catch(() => {
        return false
      })
    },
    toAdd() {
      this.$router.push({ path: '/mall/freight/detail' })
    },
    toEdit(freightId) {
      this.$router.push({ path: '/mall/freight/detail?templateId=' + freightId })
    }
  }
}
</script>
